<template>
  <view class="list-item" @click="toOrder">
    <!-- 头部信息(商户名称，订单状态) -->
    <orderItemHeader
      v-if="orderitem.mch && orderitem.mch.name"
      :orderitem="orderitem"
    ></orderItemHeader>

    <!-- 商品详情组件(单商品，多商品) -->
    <goodsDetail :orderitem="orderitem"></goodsDetail>

    <!-- 订单底部按钮组及价格 -->
    <orderOperate
      :orderitem="orderitem"
      @handleConfirm="handleConfirm"
      @handleCancle="handleCancle"
      @handleDelete="handleDelete"
    ></orderOperate>

    <!-- <view v-else class="list-item-bottom">
      <view style="font-size: 34rpx">
        <template v-if="orderitem.refund_type == 1">
          退货退款：
          <text style="color: #ff4544">￥{{ orderitem.refund_price }}</text>
        </template>
        <template v-if="orderitem.refund_type == 2"> 换货 </template>
      </view>
      <view class="list-item-bottom-list">
        <view
          style="width: 300rpx; text-align: right"
          v-if="orderitem.refund_status == 0"
        >
          <template v-if="orderitem.refund_type == 1">
            <template v-if="orderitem.is_agree == 0">等待处理</template>
            <template v-else>
              <template v-if="orderitem.is_user_send == 0">待买家发货</template>
              <template v-else>等卖家待处理</template>
            </template>
          </template>
          <template v-else>等卖家待处理</template>
        </view>
        <view
          style="color: #36ba75; width: 300rpx; text-align: right"
          v-if="orderitem.refund_status == 1"
          >已同意并退款</view
        >
        <view
          style="color: #36ba75; width: 300rpx; text-align: right"
          v-if="orderitem.refund_status == 2"
          >已同意换货</view
        >
        <template v-if="orderitem.refund_status == 3">
          <view
            style="color: #ff4544; width: 300rpx; text-align: right"
            v-if="orderitem.refund_type == 1"
            >已拒绝退货退款</view
          >
          <view
            style="color: #ff4544; width: 300rpx; text-align: right"
            v-if="orderitem.refund_type == 2"
            >已拒绝换货</view
          >
        </template>
      </view>
    </view> -->
  </view>
</template>

<script>
import orderItemHeader from "./components/order-item-header.vue";
import goodsDetail from "./components/goods-detail.vue";
import orderOperate from "./components/order-operate.vue";

export default {
  components: {
    orderItemHeader,
    goodsDetail,
    orderOperate,
  },
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    orderindex: {
        type: [String, Number],
        default: '0'
    }
  },
  methods: {
    handleConfirm(e) {
      this.$emit("handleConfirm", e);
    },
    handleCancle(e) {
      this.$emit("handleCancle", e);
    },
    toOrder() {
        this.$emit("toOrder", this.orderindex)
    },
    handleDelete(e) {
      this.$emit("handleDelete", e);
    }
  },
};
</script>

<style  lang="scss" scoped>
.list-item {
  // margin-top: 24rpx;
  margin: 24rpx 0;
  background-color: #ffffff;
  padding: 24rpx;

  // .list-item-bottom {
  //   margin-top: 30rpx;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;

  //   .list-item-bottom-list {
  //     display: flex;
  //     justify-content: flex-end;

  //     view {
  //       width: 152rpx;
  //       height: 60rpx;
  //       line-height: 60rpx;
  //       text-align: center;
  //       margin-left: 22rpx;
  //       font-size: 26rpx;
  //       border-radius: 30rpx;
  //     }

  //     navigator {
  //       width: 152rpx;
  //       height: 60rpx;
  //       line-height: 60rpx;
  //       text-align: center;
  //       margin-left: 22rpx;
  //       font-size: 26rpx;
  //       border-radius: 30rpx;
  //     }

  //     .item-bottom-list-one {
  //       border: 1rpx solid #8e8e8e;
  //       color: #262626;
  //     }

  //     .item-bottom-list-two {
  //       color: #f22a10;
  //       border: 1rpx solid #f22a10;
  //     }
  //   }
  // }
}


</style>
